<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/other/center.css"/>
    <style>
        .layui-form-item {
            margin-top: 17px !important;
            margin-bottom: 17px !important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img id="avatar" src="" width="115px" height="115px" alt="">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;">头像</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" lay-filter="edit">
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">编号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="userId"
                                               lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">账号</label>
                                    <div class="layui-input-block">
                                        <input type="text" readonly name="userName"
                                               lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题"
                                               class="layui-input  layui-disabled" disabled>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">昵称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="nickName"
                                               lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="email" lay-verify="title|email"
                                               autocomplete="off" placeholder="请输入标题" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="phone" lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="sex" value="1" title="男">
                                        <input type="radio" name="sex" value="2" title="女">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">部门</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="deptName" lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题"
                                               class="layui-input  layui-disabled" disabled>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                                                lay-filter="user-update">修改资料
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['element', 'jquery', 'layer', 'form', 'easyAdmin'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let easyAdmin = layui.easyAdmin;
        // 获取用户信息，用户名、昵称、头像等
        easyAdmin.http({
            url: "/api/v1/userInfo",
            dataType: 'json',
            success: function (result) {
                $("#avatar").attr("src", result.data.avatar || "../../../admin/images/avatar.jpg");
                form.val("edit", result.data);
            },
            error: function () {
                // 用于验证前端信息 对应到不对的会话情况
                // 清空本地存储
                console.log("当前浏览器存储中没有用户信息,清空本地存储,讲跳转到login.html")
                layui.data('user', null);
                location.href = "login.html";
            }
        });


        $("#avatar").click(function () {
            layer.open({
                type: 2,
                title: '更换图片',
                shade: 0.1,
                area: ["900px", "500px"],
                content: "profile.html",
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    window['layui-layer-iframe' + index].submitForm();
                }
            });
        });

        form.on('submit(user-update)', function (data) {
            easyAdmin.http({
                url: '/sys/user',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg("修改成功", {icon: 1, time: 2000, area: ['100px', '65px']});
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 2000, area: ['260px', '65px']});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>
